<template>
  <div id="container" >
  </div>
</template>

<script lang="ts">
import G6 from '@antv/g6';
import { Component, Vue } from "vue-property-decorator";


@Component({
  name: "shareholder",

})
export default class extends Vue {
    mounted() {
      this.g6()
    }
    private baseArr = []
    private i = 1
    private g6() {
      G6.registerNode('card-node', {
        draw: function drawShape(cfg, group) {
          // console.log(cfg, 'cfg')
          const r = 5;
          let color = '#5B8FF9';
          const w = cfg.size[0];
          let h = cfg.size[1];
          let Y = -h / 2
          let markerY = 0
          let textY = 55
          // 不同高度， 不同位置
          if(cfg.id.indexOf('B') != -1) {
            h = 120
            textY = 100
            Y = -h / 2
            Y += (h - cfg.size[1] ) / 2
            markerY += (h - cfg.size[1] ) / 2
            color = 'pink'
          } else if (cfg.id.indexOf('C') != -1) {
            h = 50
            Y = -h / 2
            Y += (h - cfg.size[1] ) / 2
            markerY += (h - cfg.size[1] ) / 2
            color = 'gold'
          }
          const shape = group.addShape('rect', {
            attrs: {
              x: w,
              y: Y,
              width: w, //200,
              height: h, // 60
              stroke: color,
              radius: r,
              fill: '#fff',
            },
            name: 'main-box',
            draggable: true,
          });

          // group.addShape('rect', {
          //   attrs: {
          //     x: w,
          //     y: Y,
          //     width: w, //200,
          //     height: h / 2, // 60
          //     fill: '#fff',
          //     stroke: '',
          //     radius: [r, r, 0, 0],
          //   },
          //   name: 'title-box',
          //   draggable: true,
          // });

           group.addShape('rect', {
            attrs: {
              x: w,
              y: Y,
              width: 5,
              height: h,
              radius: [r, 0, 0, r],
              fill: color
            },
          });

          // title text
          group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: w  + 50,
              y: Y + 20,
              fontSize: 28,
              lineHeight: 20,
              text: this.fittingString(cfg.id + '---text11111'),
              fill: color,
            },
            name: 'title',
          });
          cfg.flag &&
            group.addShape('marker', {
              attrs: {
                x: w + 20,
                y: markerY ,
                r: 12,
                cursor: 'pointer',
                symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                stroke: '#666',
                lineWidth: 1,
                fill: '#fff',
              },
              name: 'collapse-icon',
            });
          (cfg.id.indexOf('B') != -1) && group.addShape('rect', {
            attrs: {
              textBaseline: 'top',
              width: 120,
              height: 30,
              x: w  + 50,
              y: Y + 60,
              lineHeight: 20,
              fontSize: 18,
              text: 'description',
              fill: 'red',
              color: color,
              stroke: '#666',
            },
          });
          (cfg.id.indexOf('B') != -1) && group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: w  + 60,
              y: Y + 70,
              lineHeight: 20,
              fontSize: 18,
              text: 'description',
              fill: '#fff',
              color: color,
              stroke: '#666',
            },
          });

          !(cfg.id.indexOf('C') != -1) && group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              w: 100,
              x: w  + 50,
              y: Y + textY,
              lineHeight: 20,
              fontSize: 18,
              text: 'description',
              fill: 'rgba(0,0,0, 1)',
            },
            name: `description`,
          });
          return shape;
        }.bind(this),
        setState(name, value, item) {
          if (name === 'collapsed') {
            const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
            const icon = value ? G6.Marker.expand : G6.Marker.collapse;
            marker.attr('symbol', icon);
          }
        },
      });
      G6.registerEdge(
        'step-line',
        {
          getControlPoints: function getControlPoints(cfg) {
            const startPoint = cfg.startPoint;
            const endPoint = cfg.endPoint;
            return [
              startPoint,
              {
                x: startPoint.x + 10,
                y: endPoint.y + 20,
              },
              endPoint,
            ];
          },
        },
        'loop',
      );
      const data = {
        id: 'A',
        flag: true,
        children: [
          {
            id: 'A1',
            flag: true,
            children: [{ id: 'A11' }, { id: 'A12' }, { id: 'A13' }, { id: 'A14' }],
          },
          {
            id: 'B2',
            flag: true,

            children: [
              {
                id: 'A21',
                flag: true,
                children: [{ id: 'C211',flag: true,  }, { id: 'A212' }],
              },
              {
                id: 'A22',
                flag: true,
                collapsed: true,
              },
            ],
          },
        ],
      };
      const width = document.getElementById('container').scrollWidth ;
      const height = document.getElementById('container').scrollHeight || 600 ;
      const toolbar = new G6.ToolBar()
      const graph = new G6.TreeGraph({
        plugins: [toolbar],
        container: 'container',
        width ,
        height,
        modes: {
          default: [
            // {
            //   type: 'collapse-expand',
            //   animate: true,
            //   onChange: function onChange(item, collapsed) {
            //     const data = item.get('model');
            //     data.collapsed = collapsed;
            //     return true;
            //   },
            // },
            'drag-canvas',
            // 'zoom-canvas',
          ],
        },
        defaultNode: {
          type: 'card-node',
          size: [500, 80],
          style: {
            fill: '#C6E5FF',
            stroke: '#5B8FF9',
          },
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF'
          },
        },
        layout: {
          type: 'indented',
          isHorizontal: true,
          direction: 'LR',
          indent: 10,
          getHeight: (d) => {
            let h = 60
            if(d.id.indexOf('B') != -1) {
              h = 100
            } else if (d.id.indexOf('C') != -1) {
              h = 30
            }
            return h;
          },
        },
      });
      // graph.node(function(node) {
      //   return {
      //     type: 'card-node',
      //     size: [500, 80],
      //     style: {
      //       fill: '#C6E5FF',
      //       stroke: '#5B8FF9',
      //     },
      //   }
      //   // return {
      //   //   type: "card-node",
      //   //   style: {
      //   //     fill: "#40a9ff",
      //   //     stroke: "#096dd9"
      //   //   },
      //   //   label: node.id,
      //   //   labelCfg: {
      //   //     position: "center",
      //   //     style: {
      //   //       fontSize: 14
      //   //     }
      //   //   }
      //   // };
      // });
      graph.edge(() => {
        return {
          type: 'step-line',
          style: {
            stroke: '#A3B1BF'
          },
        };
      })
      graph.data(data);
      graph.render();
      graph.fitView();
      graph.on('node:click', (e) => {
        this.i++
        let arr = [{ id: 'd211' + this.i, flag: true, collapsed: true,  }, { id: 'd212' + this.i }]
        const { item, target } = e

        if (e.target.get('name') === 'collapse-icon') {
          const model = item.getModel()
          const { childrenKeys, id, collapsed, recordIndex } = model
          if (!this.baseArr.includes(id) && !model.children ) {
            this.baseArr.push(id)
            model.children = arr
          }
          // 解决 第一次 出问题原因
          if(!e.item.hasState("collapsed")) {
            graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed)
          }
          e.item.getModel().collapsed = !e.item.getModel().collapsed;
          graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
          graph.layout();
        }

      });
    }
    private  fittingString = (str, maxWidth = 100, fontSize = 12) => {
      const ellipsis = '...';
      const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
      let currentWidth = 0;
      let res = str;
      const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
      str.split('').forEach((letter, i) => {
        if (currentWidth > maxWidth - ellipsisLength) return;
        if (pattern.test(letter)) {
          // Chinese charactors
          currentWidth += fontSize;
        } else {
          // get the width of single letter according to the fontSize
          currentWidth += G6.Util.getLetterWidth(letter, fontSize);
        }
        if (currentWidth > maxWidth - ellipsisLength) {
          res = `${str.substr(0, i)}${ellipsis}`;
        }
      });
      return res;
    };
}
</script>

<style lang="scss" scoped>
  #container {
    width:100% ;
    height: 100%;
  }

</style>
